<template>
  <div class="app-container reboot">
    <div v-if="!showNodeRebootContainer">
      <div class="reboot-header">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="_getNodeRebootList"/>
      </div>
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="节点">
          <template slot-scope="scope">
            <span>{{ scope.row.instance }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间">
          <template slot-scope="scope">
            <span>{{ scope.row.start ? new Date(Date.parse(new Date(scope.row.start))).Format("yyyy-MM-dd hh:mm:ss") : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="结束时间">
          <template slot-scope="scope">
            <span>{{ scope.row.end ? new Date(Date.parse(new Date(scope.row.end))).Format("yyyy-MM-dd hh:mm:ss") : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="容器数量">
          <template slot-scope="scope">
            {{ scope.row.containers.length }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <a :class="{'not-allowed': scope.row.containers.length === 0}" class="table-action" @click="viewContainer(scope.row)">查看容器</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="showNodeRebootContainer">
      <div class="container-header">
        <span>节点：{{ curViewContainerNode }}</span>
        <a class="view-container-back" @click="returnBack">返回</a>
      </div>
      <el-table
        :data="nodeRebootContainerList"
        fit
        highlight-current-row>
        <el-table-column align="left" label="任务名">
          <template slot-scope="scope">
            {{ scope.row.jobname }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="用户名">
          <template slot-scope="scope">
            {{ scope.row.usrname }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="重启时间">
          <template slot-scope="scope">
            {{ scope.row.start ? new Date(scope.row.start).Format("yyyy-MM-dd hh:mm:ss") : '-' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="恢复时间">
          <template slot-scope="scope">
            {{ scope.row.end ? new Date(scope.row.end).Format("yyyy-MM-dd hh:mm:ss") : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getNodeRebootList } from '@/api/analysis'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      time: '',
      nodeRebootContainerList: [],
      showNodeRebootContainer: false,
      curViewContainerNode: ''
    }
  },
  created() {
    // 设置默认调用一天数据
    const nowTime = new Date()
    const yesterDayTime = new Date(nowTime.getTime() - 3600 * 1000 * 24)
    this.time = [yesterDayTime, nowTime]
    this._getNodeRebootList()
  },
  methods: {
    // 查看重启面板节点容器
    viewContainer(row) {
      this.curViewContainerNode = row.instance
      this.nodeRebootContainerList = row.containers
      this.showNodeRebootContainer = true
    },
    // 查看重启面板节点容器返回
    returnBack() {
      this.curViewContainerNode = ''
      this.nodeRebootContainerList = []
      this.showNodeRebootContainer = false
    },
    // 查询重启面板
    _getNodeRebootList() {
      this.listLoading = true
      let query = ''
      if (this.time[0] && this.time[1]) {
        query = `?start_time=${this.time[0].getTime()}&end_time=${this.time[1].getTime()}`
      } else {
        query = ''
      }
      getNodeRebootList(query).then(res => {
        if (res.message.code === 0) {
          this.listLoading = false
          this.list = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.reboot {
  &-header {
    padding: 10px;
    background: #ffffff;
    .header-title {
      font-size: 14px;
      font-weight: 700;
    }
    .header-title-left {
      float: right;
      height: 40px;
      line-height: 40px;
    }
  }
  .container-header {
    padding: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }
  .container-header .view-container-back {
    float: right;
    color: #3a8ee6;
    font-weight: normal;
  }
  label {
    font-weight: normal
  }
  .table-action {
    color: #4285f4;
  }
  .table-link {
    color: #4285f4;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
